<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">

    <!-- <script src="https://cdn.jsdelivr.net/npm/zrender@4.3.0/dist/zrender.js"></script> -->
    <script src="zrender.js"></script>

    <title></title>
</head>

<body>
    <div id="container" style="height: 600px; width: 800px;"></div>


    <script>
        var zr = zrender.init(document.getElementById('container'));
        // var rect = new zrender.Rect({
        //     shape: {
        //         x: 0,
        //         y: 100,
        //         width: 100,
        //         height: 200,
        //         r: [30],
        //     },
        //     style: {
        //         fill: 'red',
        //         stroke: 'none',
        //     },
        //     z: 1,
        // });

        // var circle = new zrender.Circle({
        //     shape: {
        //         cx: 200,
        //         cy: 100,
        //         r: 50.
        //     },
        //     style: {
        //         fill: '#153472',
        //         stroke: 'green',
        //         lineWidth:2,
        //     },
        //     z: 1,
        // });
        // var arc = new zrender.Arc({
        //     shape: {
        //         cx: 400,
        //         cy: 100,
        //         r: 50,
        //         startAngle:-35,
        //         clockwise:false,
        //     },
        //     style: {
        //         // fill: '#153472',
        //         stroke: 'green',
        //         lineWidth:20,
        //     },
        //     z: 1,
        // });


    var w = zr.getWidth();
    var h = zr.getHeight();

    // var sun = new zrender.Circle({
    //     shape: {
    //         cx: 0,
    //         cy: 0,
    //         r: 50
    //     },
    //     style: {
    //         fill: '#FF904F'
    //     },
    //     position: [w / 2, h / 2],
    //     z:1,
    // });
    // var rect=new zrender.Rect({
    //     shape:{
    //         x:0,
    //         y:0,
    //         width:w,
    //         height:h/2,
    //     },
    //     style:{
    //         fill:new zrender.RadialGradient(0.5,-0.1,1,
    //         [
    //             {
    //                 offset:0,
    //                 color:'#ff6040',
    //             },
    //             {
    //                 offset:0.2,
    //                 color:'#ffa040',
    //             },
    //             {
    //                 offset:1,
    //                 color:'#0060ff',
    //             },
    //         ])
    //     },
    //     position:[0,h/2],
    //     z:10,
    // });
    // zr.add(sun);
    //     zr.add(rect);

    //     var sky = new zrender.Rect({
    //     shape: {
    //         cx: 0,
    //         cy: 0,
    //         width: w,
    //         height: h
    //     },
    //     style: {
    //         fill: '#D7F9FF'
    //     },
    // });

    // zr.add(sky);

    
    var circle = new zrender.Circle({
      shape: {
        cx: w / 2,
        cy: h / 2,
        r: 50
      },
      style: {
        fill: '#FF6EBE'
      },
      // draggable: true
    });

    var heart = new zrender.Heart({
      shape: {
        cx: w / 2 + 20,
        cy: h / 2 - 40,
        width: 60,
        height: 80
      },
      // draggable: true
    });

    circle.setClipPath(heart);

    var circle1 = new zrender.Circle({
      shape: {
        cx: w / 2,
        cy: h / 2,
        r: 50
      },
      style: {
        fill: 'transparent',
        stroke: '#5ACFFF'
        // fill: '#FF6EBE'
      },
      // draggable: true
    });

    var heart1 = new zrender.Heart({
      shape: {
        cx: w / 2 + 20,
        cy: h / 2 - 40,
        width: 60,
        height: 80
      },
      style: {
        fill: 'transparent',
        stroke: '#5ACFFF'

      }
      // draggable: true
    });


        // rect.animate('shape', true)
        //     .when(1000, { x: 100 })
        //     .when(2000, { x: 0 })
        //     .when(3000, { y: 100 })
        //     .when(4000, { y: 0 })
        //     .start();
        // rect.on('click', function (e) {
        //     // console.log('我被点击了')
        //     window.open('http://yishao.top')

        // });
        // var rect1 = new zrender.Rect({
        //     shape:{
        //         x:50,
        //         y:100,
        //         width:100,
        //         height:200,
        //     },
        //     style:{
        //         // fill:'red',
        //         stroke:'none',
        //     },
        //     z:10,
        // });



    //     zr.add(rect1);
    //     zr.add(rect);
    //    zr.add(circle);
    //     zr.add(arc);
        zr.add(circle);
        zr.add(heart)
        zr.add(circle1);
        zr.add(heart1);
    </script>
</body>

</html>
